import React, { Component } from 'react'
import { Button } from 'antd'

import HeaderComp from '@/pages/Dashboard/common/HeaderComp'
import { address } from '@/Utils/apiConfig'

import './index.less'

const { syHomeLink, syCertificate } = address

class ErrorPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      code: props.match.params.code,
      element: {
        '404': { // 404
          imgUrl: require('@/images/error/404.png'),
          title: '',
          subTitle: '您访问的页面不存在',
          button: '返回',
          url: syHomeLink,
        },
        '403': { // 子账号
          imgUrl: require('@/images/error/wuhuidu.png'),
          title: '暂无权限',
          subTitle: '很抱歉，您访问的页面不存在',
          button: '返回首页',
          url: () => {
            props.history.replace('/dashboard')
          },
        },
        'no-user': { // 无用户
          imgUrl: require('@/images/error/wuhuidu.png'),
          title: '账户未获取到用户信息',
          subTitle: '很抱歉，您的账户暂时未获取到用户信息',
          button: '返回',
          url: () => {
            props.history.replace('/login')
          },
        },
        'no-authority': { // 无灰度
          imgUrl: require('@/images/error/wuhuidu.png'),
          title: '账户暂未获得授权',
          subTitle: '很抱歉，您的账户暂时无开通区块链服务的权限',
          button: '返回首页',
          url: syHomeLink,
        },
        'no-certified': { // 未认证
          imgUrl: require('@/images/error/weirenzheng.png'),
          title: '未实名认证',
          subTitle: '您的账号暂未进行实名认证，无法订购，请先前往认证',
          button: '前往认证',
          url: syCertificate,
        },
        'isPaused': { // 冻结用户
          imgUrl: require('@/images/error/paused.png'),
          title: '账户已被冻结',
          subTitle: '您的账户已被冻结，请及时充值或联系客户经理',
          button: '返回首页',
          url: syHomeLink,
        },
      },
    }
  }

    clickFn = () => {
      const { code, element } = this.state
      if (code === '404') {
        // 判断是404页面，有上一页则返回上一页，没有则到首页
        if (this.props.history.length === 1) {
          // 跳到首页
          typeof element[code].url === 'function' ? (element[code].url)() : window.location.href = element[code].url
        } else {
          // 返回上一页
          this.props.history.go(-1)
        }
      } else {
        // 跳到首页
        typeof element[code].url === 'function' ? (element[code].url)() : window.location.href = element[code].url
      }
    }

    render() {
      const { code, element } = this.state
      return <div className="error-page common">
        <HeaderComp {...this.props}/>
        <div className="error-box">
          <img className="error-img" src={element[code].imgUrl} alt="" />
          {
            element[code].title &&
              <div className="title">{element[code].title}</div>
          }
          <div className="sub-title">{element[code].subTitle}</div>
          <Button className="com-btn-primary" onClick={this.clickFn}>{element[code].button}</Button>
        </div>
      </div>
    }
}

export default ErrorPage
